<template>
	<view class="play">

		<view class="player">
			<view class="musicBar">
				<image :src="music.picUrl"></image>
				<text class="soneName">　{{music.name}}</text>
				<slider class="musicTime" @change="sliderChange" :value="progress" step="1" min="0" :max='duration'
					activeColor="#333333" block-size="12" block-color="#333333" />
				<view class="jinTime">{{progressText}}/{{durationText}}</view>
				<cover-image class="audio" @tap="suspend" :src="audioImg"></cover-image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import app from "../../App.vue"
	export default {
		data() {
			return {
				audioImg: '/static/imgs/播放1.png',
				id: '',
				count: 0,
				num: 0
			}
		},
		created() {
			this.num++
			// if (this.num == 1) {
				app.music.InnerAudioContext.onTimeUpdate(() => {
					console.log('-----');
					this.$store.commit("setPr", app.music.InnerAudioContext.currentTime)
					this.$store.commit("setDu", app.music.InnerAudioContext.duration)
					this.$store.commit("setPrT", this.formatTime(app.music.InnerAudioContext.currentTime))
					this.$store.commit("setDuT", this.formatTime(app.music.InnerAudioContext.duration))
				})
				this.audioImg = '/static/imgs/暂停.png'

			// }
		},
		mounted() {
			console.log("++++++++",app.music.InnerAudioContext)
		},
		methods: {
			suspend() {
				if (!app.music.InnerAudioContext.paused) {
					app.music.InnerAudioContext.pause();
					this.audioImg = '/static/imgs/播放1.png'
				} else {
					app.music.InnerAudioContext.play();
					this.audioImg = '/static/imgs/暂停.png'
				}
			},
			//时间计算函数
			formatTime: function(s) {
				let t = ''
				s = Math.floor(s)
				if (s > -1) {
					let min = Math.floor(s / 60) % 60
					let sec = s % 60
					if (min < 10) {
						t += "0"
					}
					t += min + ":"
					if (sec < 10) {
						t += "0"
					}
					t += sec
				}
				return t
			},
			//滑动进度条改变播放进度
			sliderChange: function(e) {
				console.log(e);
				app.music.InnerAudioContext.pause()
				app.music.InnerAudioContext.seek(e.detail.value)
				this.$store.commit("setPrT", this.formatTime(e.detail.value))
				setTimeout(() => {
					app.music.InnerAudioContext.play()
				}, 1000)
			}
		},
		computed: {
			...mapState(['music', "progressText", "durationText", "progress", "duration"])
		},
		watch: {
			"music"(a) {
				console.log("已经OK了")
				this.count++
				app.music.InnerAudioContext.src = "https://music.163.com/song/media/outer/url?id=" + a.id;
				if (this.count > 1) {
					app.music.InnerAudioContext.play()
				}

			}
		}
	}
</script>

<style scoped>
	.play {
		position: fixed;
		bottom: 100rpx;
	}

	.musicBar {
		width: 750rpx;
		height: 150rpx;
		border: 1px solid #d33a31;
		box-sizing: border-box;
		position: relative;
		background-color: #fff;
	}

	.musicBar image {
		width: 150rpx;
		height: 150rpx;
	}

	.musicBar .soneName {
		position: absolute;
		top: 10rpx;
		max-width: 320rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.musicBar .soneName::after {
		background-color: #fff;
	}

	.hint {
		width: 750rpx;
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		z-index: 10000;
	}

	.audio {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		z-index: 10;
	}

	.musicTime {
		width: 400rpx;
		position: absolute;
		bottom: 30rpx;
		left: 175rpx;
		margin: 0;
	}

	.jinTime {
		font-size: 26rpx;
		position: absolute;
		bottom: 2rpx;
		left: 450rpx;
	}
</style>
